<!DOCTYPE html>
<html>
<head>
  <div  th:replace="common/header.html"></div>


</head>
<body th:class="${application.sidebarCollapse}">
<div th:replace="common/chart.html"></div>

<div class="wrapper"  >

  <div th:replace="common/navbar.html"></div>

  <div th:replace="common/aside.html"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="font-size:0.90rem">
    <!-- Content Header (Page header) -->
      <section class="content-header" style="height:38px">
          <div class="container-fluid">
              <div class="row mb-2" style="margin-top: -7px;">
                  <div class="col-sm-6"></div>
                  <div class="col-sm-6">
                      <ol class="breadcrumb float-sm-right">
                          <li class="breadcrumb-item">
                              <th:block th:if="${days  == '1'}"><button type="button" onclick="search('1')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近一天</button></th:block>
                              <th:block th:if="${days  != '1'}"><button type="button" onclick="search('1')" class="btn btn-primary btn-sm">最近一天</button></th:block>
                          </li>
                          <li class="breadcrumb-item">
                              <th:block th:if="${days  == '7'}"><button type="button" onclick="search('7')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近7天</button></th:block>
                              <th:block th:if="${days  != '7'}"><button type="button" onclick="search('7')" class="btn btn-primary btn-sm">最近7天</button></th:block>
                          </li>
                          <li class="breadcrumb-item">
                              <th:block th:if="${days  == '15'}"><button type="button" onclick="search('15')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近15天</button></th:block>
                              <th:block th:if="${days  != '15'}"><button type="button" onclick="search('15')" class="btn btn-primary btn-sm">最近15天</button></th:block>
                          </li>
                          <li class="breadcrumb-item">
                              <th:block th:if="${days  == '30'}"><button type="button" onclick="search('30')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近30天</button></th:block>
                              <th:block th:if="${days  != '30'}"><button type="button" onclick="search('30')" class="btn btn-primary btn-sm">最近30天</button></th:block>
                          </li>
                          <li class="breadcrumb-item"><a href="javascript:history.back()">返回上级</a></li>
                      </ol>
                  </div>
              </div>
          </div><!-- /.container-fluid -->
      </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            <div class="row  mb-2">
                <strong>告警总次数</strong><br>
                <div class="col-sm-12"  id="container1"></div>
            </div>
            <div class="row  mb-2">
                <div class="col-sm-6"> <strong>各个资源告警比例</strong></div>
                <div class="col-sm-6"> <strong>主机及其资源下线次数最高TOP10</strong></div>
            </div>
            <div class="row  mb-2">
                <div class="col-sm-6"  id="container2"></div>
                <div class="col-sm-6"  id="container3"></div>
            </div>
            <div class="row  mb-2">
                <div class="col-sm-6"> <strong>主机及其资源下线次数最低TOP10</strong></div>
                <div class="col-sm-6"> <strong>服务接口下线次数最高TOP10</strong></div>
            </div>
            <div class="row  mb-2">
                <div class="col-sm-6">
                    <div id="container4"></div>
                </div>
                <div class="col-sm-6">
                    <div id="container5"></div>
                </div>
            </div>
            <div class="row  mb-2">
                <div class="col-sm-6"> <strong>进程下线次数最高TOP10</strong></div>
                <div class="col-sm-6"> <strong>端口下线次数最高TOP10</strong></div>
            </div>
            <div class="row  mb-2">
                <div class="col-sm-6">
                    <div id="container6"></div>
                </div>
                <div class="col-sm-6">
                    <div id="container7"></div>
                </div>
            </div>


        </div><!-- /.container-fluid -->
    </section>
  </div>

  <div th:replace="common/chart.html"></div>
  <div th:replace="common/footer.html"></div>

</div>
<!-- ./wrapper -->
<link rel="stylesheet" th:href="@{'/static/js/jQuery/validationEngine.jquery.css'}" type="text/css"/>
<script th:src="@{'/static/js/jQuery/jquery.validationEngine-zh_CN.js'}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{'/static/js/jQuery/jquery.validationEngine.js'}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{'/static/js/report.js'}"></script>
<script th:inline="javascript">
    var msg = [[${msg}]];
    if(msg!='' && msg!=null){
        toastr.info(msg);
    }
    const mainBarChartData = [[${mainBarChart}]];
    const pieChartData = [[${pieChart}]];
    const top10BarChartData = [[${top10BarChart}]];
    const top10LowBarChartData = [[${top10LowBarChart}]];
    const top10HeathChartData = [[${top10HeathChart}]];
    const top10AppInfoChartData = [[${top10AppInfoChart}]];
    const top10PortInfoChartData = [[${top10PortInfoChart}]];


    const chart = new G2.Chart({
        container: 'container1',
        forceFit: true,
        height: 400,
        padding: [ 60, 50, 40, 60 ]
    });
    chart.source(mainBarChartData, {
        vote: {
            alias: '告警次数',
            min: 0,
            formatter: val => {
            return val + '次';
    }
    }
    });
    chart.legend(false);
    chart.axis('vote', {
        labels: null,
        title: null,
        line: null,
        tickLine: null
    });
    chart.interval()
        .position('name*vote')
        .color('name');
    chart.render();



    const chart2 = new G2.Chart({
        container: 'container2',
        forceFit: true,
        height: 400,
        padding: 'auto'
    });
    chart2.source(pieChartData);
    chart2.legend({
        position: 'right-center',
        offsetX: -100
    });
    chart2.coord('theta', {
        radius: 0.75
    });
    chart2.intervalStack().position('value').color('name')
        .style({
            stroke: 'white',
            lineWidth: 1
        })
        .tooltip('name*value', (name, value) => {
        value = (value * 100) + '%';
        if(value.length > 10 ){
            value = value.substr(0,5)+'%';
        }
        return {
            name: name,
            value: value
        };
    });
    chart2.render();


    const chart3 = new G2.Chart({
        container: 'container3',
        forceFit: true,
        height: 400,
        padding: [ 60, 50, 40, 60 ]
    });
    chart3.source(top10BarChartData, {
        vote: {
            alias: '告警次数',
            min: 0,
            formatter: val => {
            return val + '次';
    }
    }
    });
    chart3.legend(false);
    chart3.axis('vote', {
        labels: null,
        title: null,
        line: null,
        tickLine: null
    });
    chart3.interval()
        .position('name*vote')
        .color('name');
    chart3.render();


    const chart4 = new G2.Chart({
        container: 'container4',
        forceFit: true,
        height: 400,
        padding: [ 60, 50, 40, 60 ]
    });
    chart4.source(top10LowBarChartData, {
        vote: {
            alias: '告警次数',
            min: 0,
            formatter: val => {
            return val + '次';
    }
    }
    });
    chart4.legend(false);
    chart4.axis('vote', {
        labels: null,
        title: null,
        line: null,
        tickLine: null
    });
    chart4.interval()
        .position('name*vote')
        .color('name');
    chart4.render();

    const chart5 = new G2.Chart({
        container: 'container5',
        forceFit: true,
        height: 400,
        padding: [ 60, 50, 40, 60 ]
    });
    chart5.source(top10HeathChartData, {
        vote: {
            alias: '告警次数',
            min: 0,
            formatter: val => {
            return val + '次';
    }
    }
    });
    chart5.legend(false);
    chart5.axis('vote', {
        labels: null,
        title: null,
        line: null,
        tickLine: null
    });
    chart5.interval()
        .position('name*vote')
        .color('name');
    chart5.render();

    const chart6 = new G2.Chart({
        container: 'container6',
        forceFit: true,
        height: 400,
        padding: [ 60, 50, 40, 60 ]
    });
    chart6.source(top10AppInfoChartData, {
        vote: {
            alias: '告警次数',
            min: 0,
            formatter: val => {
            return val + '次';
    }
    }
    });
    chart6.legend(false);
    chart6.axis('vote', {
        labels: null,
        title: null,
        line: null,
        tickLine: null
    });
    chart6.interval()
        .position('name*vote')
        .color('name');
    chart6.render();

    const chart7 = new G2.Chart({
        container: 'container7',
        forceFit: true,
        height: 400,
        padding: [ 60, 50, 40, 60 ]
    });
    chart7.source(top10PortInfoChartData, {
        vote: {
            alias: '告警次数',
            min: 0,
            formatter: val => {
            return val + '次';
    }
    }
    });
    chart7.legend(false);
    chart7.axis('vote', {
        labels: null,
        title: null,
        line: null,
        tickLine: null
    });
    chart7.interval()
        .position('name*vote')
        .color('name');
    chart7.render();

</script>
</body>
</html>
